<template>
  <div>
    <el-dialog
      :title="info.type === 'add' ? '新增分类' : '编辑分类'"
      :visible.sync="info.isShow"
      width="60%"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="上级分类" prop="pid">
          <el-select v-model="ruleForm.pid">
            <el-option label="顶级分类" :value="0"></el-option>
            <el-option
              v-for="(item, index) in cateList"
              :key="index"
              :label="item.catename"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="分类名称" prop="catename">
          <el-input v-model="ruleForm.catename"></el-input>
        </el-form-item>
        <el-form-item label="分类图片" prop="icon">
          <!-- action：必填项，上传的地址 -->
          <!-- auto-upload:是否自动上传 -->
          <!-- list-type：组件的形式， 照片墙 -->
          <!-- on-preview：预览图片时执行的函数 -->
          <!-- on-remove：移除图片时执行的函数 -->
          <!-- on-change：修改文件时执行的函数 -->
          <!-- file-list:历史文件列表 -->
          <!-- limit:最大允许上传个数 -->
          <!-- on-exceed:文件超出个数限制时的钩子 -->
          <el-upload
            action="#"
            :auto-upload="false"
            list-type="picture-card"
            :on-remove="handleRemove"
            :on-change="handleChange"
            :file-list="fileList"
            :limit="1"
            :on-exceed="handlerExceed"
          >
            <i class="el-icon-plus"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-radio-group v-model="ruleForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="2">禁用</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button
            v-if="info.type === 'add'"
            type="primary"
            @click="submitForm('ruleForm')"
            >立即创建</el-button
          >
          <el-button v-else type="success" @click="submitForm('ruleForm')"
            >立即修改</el-button
          >
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { menuEdit, cateList, cateAdd, cateEdit } from "../../api";
export default {
  props: ["info"],
  data() {
    return {
      // 历史图片列表
      fileList: [],
      // 下拉框的数组
      cateList: [],
      ruleForm: {
        // 上级id，parentid可能重复，id不会重复
        pid: 0,
        catename: "",
        img: "",
        status: 1,
      },
      rules: {
        pid: [{ required: true, message: "请选择上级目录", trigger: "change" }],
        catename: [
          { required: true, message: "请输入分类名称", trigger: "blur" },
        ],
      },
    };
  },
  created() {
    this.getCateList();
  },
  methods: {
    // 给表单赋值
    setValue(info) {
      // 打开弹窗，先清空
      this.fileList = [];
      // 深拷贝，比避免数据互相影响
      this.ruleForm = { ...info };
      if(this.ruleForm.img) {
        // 有图片数据时再想文件列表中增加数据
        this.fileList.push({
          // 固定格式，一个对象就是一个图片，有name和url两个属性
          name: 'u-admin',
          url: this.$host + this.ruleForm.img
        })
      }
    },
    // 获取下拉框的数据
    async getCateList() {
      let res = await cateList();
      this.cateList = res.list;
    },
    submitForm(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          // 上传的数据中有文件，大体积的二进制文件需要转换成formdata格式，再向后台提交
          let fd = new FormData();
          // fd.append('catename', this.ruleForm.catename)
          // fd.append('img', '')
          // fd.append('pid', this.ruleForm.pid)
          // fd.append('status', this.ruleForm.status)
          // console.log(fd.get('catename'));
          for (const key in this.ruleForm) {
            // append是增加数据的方法
            fd.append(key, this.ruleForm[key]);
          }
          // fd.forEach((name, key) => {
          //   console.log(key, name);
          // });
          if (this.info.type === "add") {
            let res = await cateAdd(fd);
          } else {
            // 编辑
            let res = await cateEdit(fd);
          }
          // 关闭弹窗
          this.info.isShow = false;
          // 通知list再次获取数据  info->index->list
          this.$emit("update");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    // 删除图片
    handleRemove() {
      this.ruleForm.img = '';
    },
    // 修改文件
    handleChange(file) {
      this.ruleForm.img = file.raw;
    },
    // 文件超出个数限制时的钩子
    handlerExceed() {
      this.$message({
        type: "warning",
        message: "最多上传一张图片",
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
  },
};
</script>

<style>
</style>